<template>
    <div class="header-right">
        <el-avatar
            src="/public/1.jpg"
        />
        <el-dropdown trigger="click" @command="commandMenu">
            <span class="el-dropdown-link">
                {{ store.userinfo.username }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="editUserInfo">修改个人信息</el-dropdown-item>
                    <el-dropdown-item divided command="logout">用户退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { Setting, ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import type { userStoreType } from '@/store/user'
import type { ILoginResultType } from '@/typings/userType'

const router = useRouter()
// const props = defineProps(['store'])

interface IProps {
    store: userStoreType
}
const props = defineProps<IProps>()

const methods = {
    editUserInfo() { },
    async logout() {
        try {
            await ElMessageBox.confirm('您真要退出本次登录吗？', '退出提示', {
                confirmButtonText: '确认退出',
                cancelButtonText: '考虑一下',
                type: 'warning'
            })
            // 点击了确认，进行退出操作
            props.store.setUserInfo({} as ILoginResultType)
            window.location.href = '/login'
        } catch (error) { }
    }
}

const commandMenu = (command: string) => {
    methods[command as keyof typeof methods]()
}
</script>

<style lang="scss" scoped>
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    .el-avatar {
        margin-right: 10px;
    }
}
</style>